<template xmlns:el="http://www.w3.org/1999/html">
  <div class="content-div">
    <LoginHeader/>
    <div class="body-div">
      <el-card class="box-card">
        <div  class="text item">

          <template>
            <el-tabs v-model="activeName" type="border-card"  @tab-click="handleClick">
              <el-tab-pane label="普通方式登录" name="first">
                <h5>账号登录</h5>
                <el-form :model="LoginForm" :rules="loginRules" ref="LoginForm" label-width="100px" class="demo-ruleForm">
                      <el-form-item  label="账号:" prop="userName">
                        <el-input v-model="LoginForm.userName" placeholder="请输入账号或邮箱和密码"></el-input>
                      </el-form-item>
                  <el-form-item  label="密码" prop="passWord">
                    <el-input v-model="LoginForm.passWord" placeholder="请输入密码"></el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="text" @click="loginDialogVisible=true">还没有账号,注册账号</el-button>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="">登录</el-button>
                  </el-form-item>
                </el-form>
              </el-tab-pane>

              <el-tab-pane label="手机动态码登录" name="second">
                <h5>手机动态码登录</h5>
                <el-form :model="LoginPhoneForm" :rules="PhoneRules" ref="LoginForm" label-width="100px" class="demo-ruleForm">
                  <el-form-item  label="手机号:" prop="userPhone">
                    <el-input v-model="LoginPhoneForm.userPhone" placeholder="请输入手机号"></el-input>
                    <el-button >获取动态码</el-button>
                  </el-form-item>
                  <el-form-item  label="动态码:" prop="phoneCode">
                    <el-input v-model="LoginPhoneForm.phoneCode" placeholder="请输入动态码"></el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="text" @click="loginDialogVisible=true">还没有账号,注册账号</el-button>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="">登录</el-button>
                  </el-form-item>
                </el-form>
              </el-tab-pane>

              <el-tab-pane label="邮箱登录" name="third">
                <h5>邮箱登录</h5>
                <el-form :model="LoginEmailForm" :rules="rules" ref="LoginForm" label-width="100px" class="demo-ruleForm">
                  <el-form-item  label="邮箱:" prop="userPhone">
                    <el-input v-model="LoginEmailForm.userEmail" placeholder="请输入邮箱"></el-input>
                    <el-button >获取动态码</el-button>
                  </el-form-item>
                  <el-form-item  label="动态码:" prop="emailCode">
                    <el-input v-model="LoginEmailForm.emailCode" placeholder="请输入动态码"></el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="text" @click="loginDialogVisible=true">还没有账号,注册账号</el-button>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="">登录</el-button>
                  </el-form-item>
                </el-form>
              </el-tab-pane>
            </el-tabs>
          </template>
        </div>
      </el-card>
    </div>


<div class="dialog-div">
  <el-dialog
      title="账号注册"
      :visible.sync="loginDialogVisible"
      width="30%"
      center>
    <el-form :model="registerRuleForm" :rules="registerRules" ref="registerRuleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="用户帐号:" prop="userAccount">
        <el-input v-model="registerRuleForm.userAccount" placeholder="请输入用户账号"></el-input>
      </el-form-item>
      <el-form-item label="手机号:" prop="userPhone">
        <el-input v-model="registerRuleForm.phoneCode" placeholder="请输入手机号"></el-input><el-button >获取动态码</el-button>
      </el-form-item>
      <el-form-item  label="动态码:" prop="userPhoneCode">
        <el-input v-model="registerRuleForm.phoneCode" placeholder="请输入动态码"></el-input>
      </el-form-item>
      <el-form-item label="手机号:" prop="userEmail">
        <el-input v-model="registerRuleForm.userEmail" placeholder="请输入邮箱"></el-input><el-button >获取动态码</el-button>
      </el-form-item>
      <el-form-item  label="动态码:" prop="userEmailCode">
        <el-input v-model="registerRuleForm.userPassword" placeholder="请输入动态码"></el-input>
      </el-form-item>
      <el-form-item  label="用户密码:" prop="userEmailCode">
        <el-input v-model="registerRuleForm.userPassword" placeholder="请输入密码"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
    <el-button @click="loginDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="loginDialogVisible = false">确 定</el-button>
  </span>
  </el-dialog>
</div>


  </div>


</template>

<script>
import LoginHeader from "./page/LoginHeader";
export default {
  name: "Login",
  components:{LoginHeader},
  data(){
    return{
      loginDialogVisible:false,
      activeName: 'first',
      LoginForm:{
        userName:'',
        passWord:'',
      },
      LoginPhoneForm:{
        userPhone:'',
       phoneCode:''
      },
      LoginEmailForm:{
        userEmail:'',
        emailCode:''
      },
      registerRuleForm:{
        userAccount:'',
        userPhone:'',
        phoneCode:'',
        userEmail:'',
        emailCode:'',
        userPassword:'',
      },
      loginRules:{
        userName:[
          { required: true, message: '请输入账号', trigger: 'blur' },
        ],
        passWord:[
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 16, message: '长度在 6 到 16 个字符', trigger: 'blur' }
        ]
      },
      PhoneRules:{
        userPhone:[
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { min: 11, max: 11, message: '请输入正确的手机号', trigger: 'blur' }
        ],
        phoneCode:[
          { required: true, message: '请输入动态码', trigger: 'blur' },
        ]
      },
      registerRules:{

      }
    }
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    }
  }

}
</script>

<style scoped lang="scss">
@import "../assets/css/mixin";
.content-div{
  .body-div{
    .box-card {
      width: 980px;
      margin: 0 auto;
      .text {
        font-size: 14px;
      }
      .item {
        padding: 18px 0;
      }
    }
  }
}
.el-input{
  width: 260px;
}

</style>